<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>小虫子爬虫管理系统 - 登录</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
	<meta http-equiv="description" content="This is my page" />
	<link href="${ctx }/css/style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="${ctx }/js/jquery/jquery-1.8.2.min.js"></script>
    <link href="${ctx }/js/layui/css/layui.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="${ctx }/js/layer/layer.js"></script>
	
	<script type="text/javascript">
	
		if (top.location != self.location){  
			top.location=self.location;  
		}	
		
		/**调整界面样式**/
		$(function(){
	    	$('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
			$(window).resize(function(){  
	    		$('.loginbox').css({'position':'absolute','left':($(window).width()-692)/2});
	    	})  
		});  
		
		/**系统登录**/
		function login(){
			var loadi = layer.msg('正在登陆验证', {icon: 16})
			$.ajax({
				type:"POST",
				url:"${ctx}/sysman/loginIn.do",
				data:$("#login").serialize(),
				dataType:"json",
				async:true,
				success:function(data){
					layer.close(loadi);
					if(data.status=='SUCCESS'){
						location='${ctx}/sysman/index/main.do';
						return;
					}
					layer.alert(data.msg, {icon: 2});
					changeCode();
					$("#pwd").val("");
					$("#imgCode").val("");
				}
			});
		}

		function changeCode(){
			var imgcodeurl = '${ctx}/servlet/ImgCodeServlet?t='+new Date();
			$(".imgCodes").attr("src",imgcodeurl);
		}
		
		function onEnterDown(evt){
			var e = (evt) ? evt : window.event;
			if(e.keyCode == 13){ 
				login(); 
			} 
		}
	</script>
	<style type="text/css">
		img{
			position: relative;
			top: 8px;
			height: 30px;
		}
		.systemlogo{
			text-align: center;
			font-size: 30px;
			color: white;
			line-height: 70px;
			background: none;
		}
		.loginbox {
			background: url(${ctx}/images/login_back.png) no-repeat;
		}
		.loginbox ul{
			margin-top: 26px;
			margin-left: 370px;
		}
	</style>
  </head>
	<body onkeydown='onEnterDown(event);' style="background-color:#1c77ac; background-image:url(images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">
	    <div id="mainBody">
	      <div id="cloud1" class="cloud"></div>
	      <div id="cloud2" class="cloud"></div>
	    </div>  
		<div class="logintop">    
	    	<span>欢迎使用小虫子爬虫管理系统</span>
	    	<ul>
	    		<li><a href="#">行动起来，参与开发！</a></li>
	    	</ul>
	    </div>
	    <div class="loginbody">
			<span class="systemlogo">小虫子爬虫管理系统 - 管理运维</span>
			<form id="login">
				<div class="loginbox">
					<ul>
						<li>
							<p style="font-size: 20px;font-weight: bold;">欢迎登录</p>
						</li>
						<li><input name="userName" type="text" class="loginuser" /></li>
						<li style="margin-bottom:10px;"><input id="pwd" name="password" type="password" class="loginpwd" /></li>
						<li style="width:250px;">
							<div style="margin-bottom: 4px;">
								<input  name="validatedCode" id="imgCode" type="text" class="search_dfinput" style="height:34px;width:138px;font-size: 14px;border-radius: 2px;border: solid 1px #bfccd7;" placeholder="输入验证码"/>
								<img src="${ctx }/servlet/ImgCodeServlet?t=<%= new Date() %>" class="imgCodes" style="margin-left: 5px;vertical-align: text-bottom;cursor: pointer" onclick="changeCode();" title="看不清?点击更换"/>
							</div>
						</li>
						<li style="clear:both;padding-top: 10px;">
							<a href="javascript:;" style="width: 250px;" class="layui-btn layui-btn-lg layui-btn-normal" type="button" value="登录"  onclick="javascript:login()"  >立即登录</a></li>
						<div style="margin-top: 10px;position: relative;width: 250px;">
						</div>
						</li>
					</ul>
				</div>
			</form>
	    </div>
		<div class="loginbm">小虫子爬虫系统 建议使用<a target="_blank" href="http://rj.baidu.com/soft/detail/14744.html">Chrome浏览器</a> </div>
	</body>
</html>
